<template>
	<Page :config='pageConfig'>
		
	</Page>
</template>

<script setup>
	const Page			= $.lazy(()=>import('#tp/content/page-content.vue'))
	/* ---------------------------  提交表单 --------------------------- */
	const tableModalConfig = {
		modal:{
			title 	:'弹窗标题',
			width 	: '80%',
			height	: '80%',
			controls: {
				after: [
					{ mode:'ex'},
					{ label:'后置按钮' },
				],
				before: [
					{ label:'前置按钮', disabled:true }
				]
			},
			// onOk: param => {
			// 	console.log(param)
			// 	return false
			// },
			onSubmit: param => {
				console.log(param)
			}
		},
		search:{
			data: [
				{ label:'名称', 	name:'name' }
			]
		},
		table:{
			api:'/list',
			idStr:'content',
			delApi:'del',
			paging: 0,
			cols:[
				{ title: '名称', 	dataIndex: 'name' },
				{ title: '内容', 	dataIndex: 'content' },
				{ title: '菜单名称', dataIndex: 'title' },
			],
			data:[
				{ name:'Vue',  content:'vue' },
				{ name:'React', content:'react' },
				{ name:'Fluuter', content:'flutter' },
				{ name:'Java', content:'java' },
			],
			controls 	: {
				data: ({ name, content }) => {
					return [
						{ label:'下载', mode:'download'},
						{ mode:'delPop' },
					]
				}
			},
			row:{
				keys:['vue'],					// 默认选中
				disabledKeys: ['java'],			// 禁用选项
				change: ({ keys, vaues })=>{
					console.log(keys)
				}
			}
		}
	}
	const pageConfig = {
		title: '全局弹窗表格',
		controls	: [
			{ label:'配置弹窗', mode:'tableModal', config:tableModalConfig},
			{ label:'动态配置', mode:'tableModal', config:()=>tableModalConfig},
			{ label:'弹窗表格', click:()=>window.$tableModalRef().open(tableModalConfig) },
		]
	}
</script>